<template>
	<view class="monitor-control">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true" class="nav-custom">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">监测防控</block>
		</cu-custom>
		<view class="app-box" :style="{ height: appHeight + 'px' }">
			<template v-if="appHeight > 0">
				<mapView @mapDone="mapDone" :isShowWaterXi="false" ref="mapView" defaultBase="vec" titlePos="center"> </mapView>
			</template>
			<view class="left-list">
				<view class="type-select-row">
					<view
						class="icon-type-row"
						v-for="item in leftTopList.slice(0, 2)"
						:key="item.key"
						:class="{ 'icon-type-row-ac': item.isActive }"
					>
						<template v-if="item.value == 'spot'">
							<view style="width: 30rpx; height: 30rpx" class="flex-cc">
								<i :class="`iconfont ${item.icon}`"></i>
							</view>
							<text class="text nop ml15" @click="iconTyCG(item)"> {{ item.name }}</text>
						</template>
						<template v-else>
							<view style="width: 30rpx; height: 30rpx" class="flex-cc">
								<i :class="`iconfont icon-fenlei`"></i>
							</view>
							<view class="text nop ml15" style="width: 90rpx">
								<listSelect :list="elementList" :isIcon="false" v-model="moreEle" @change="changeElement"></listSelect>
							</view>
						</template>
					</view>
				</view>
				<!-- <listSelect :list="elementList" v-model="accHour" @change="CGaccHour"></listSelect> -->
				<view class="type-select-row mt20">
					<view
						class="icon-type-row"
						v-for="item in leftTopList.slice(2, 6)"
						:key="item.key"
						:class="{ 'icon-type-row-ac': item.isActive }"
						@click="iconTyCG(item)"
					>
						<view style="width: 30rpx; height: 30rpx" class="flex-cc">
							<i :class="`iconfont ${item.icon}`"></i>
						</view>
						<text class="text nop ml15"> {{ item.name }}</text>
					</view>
				</view>

				<view class="type-select-row mt20">
					<view
						class="icon-type-row"
						v-for="item in leftTopList.slice(6, 8)"
						:key="item.key"
						:class="{ 'icon-type-row-ac': item.isActive }"
						@click="iconTyCG(item)"
					>
						<view style="width: 30rpx; height: 30rpx" class="flex-cc">
							<i :class="`iconfont ${item.icon}`"></i>
						</view>
						<text class="text nop ml15"> {{ item.name }}</text>
						<!-- <template v-if="type == item.value && type != 'typhoon'">
							<playCpn :data="item.list" @change="(e) => playEV(e, item.value)" class="ml15"></playCpn>
						</template> -->
					</view>
				</view>

				<view class="type-select-row mt20">
					<view
						class="icon-type-row"
						v-for="item in leftTopList.slice(8, 9)"
						:key="item.key"
						:class="{ 'icon-type-row-ac': item.isActive }"
						@click="iconTyCG(item)"
					>
						<view style="width: 30rpx; height: 30rpx" class="flex-cc">
							<i :class="`iconfont ${item.icon}`"></i>
						</view>
						<text class="text nop ml15"> {{ item.name }}</text>
					</view>
				</view>
			</view>

			<view class="right-list" v-show="type == 'moreEle' || type == 'spot'">
				<listSelect :list="hourList" v-model="accHour" @change="CGaccHour"></listSelect>
			</view>
			<!-- 图例时间轴 -->
			<view class="botBox-list">
				<view class="slider-box" v-if="type == 'cloud'">
					<playTimeSlider :splitIndex="2" :items="cloudList" ref="cloudSlider" @change="playCloud"></playTimeSlider>
				</view>
				<view class="slider-box" v-if="type == 'radar'">
					<playTimeSlider :splitIndex="2" :items="radarList" ref="radarSlider" @change="playRadar"></playTimeSlider>
				</view>
				<view class="legend-list" v-show="legendShow">
					<view v-for="(item, index) in selectLegendList" :key="index" class="legend-box">
						<simpleLegend
							ref="simpleLegend"
							:isNoCilck="type != 'moreEle'"
							:legendOptions="item"
							:legendData="item.legendData"
						></simpleLegend>
					</view>

					<!-- 自定义图例 -->
					<template v-if="type == 'water'">
						<view class="water-legend">
							<view class="flex-cc" @click="clickwaterList('swz')" :class="{ noChose: !waterList.includes('swz') }">
								<image src="../../static/image/map/swz.png" mode="widthFix" style="width: 40rpx; height: 40rpx" />
								<text class="ml10">水位站</text>
							</view>

							<view class="flex-cc" @click="clickwaterList('swenz')" :class="{ noChose: !waterList.includes('swenz') }">
								<image
									src="../../static/image/map/swenz.png"
									class="ml10"
									mode="widthFix"
									style="width: 40rpx; height: 40rpx"
								/>
								<text class="ml10">水文站</text>
							</view>
							<view class="flex-cc">
								<image
									src="../../static/image/map/cjj.png"
									class="ml10"
									mode="widthFix"
									style="width: 40rpx; height: 40rpx"
								/>
								<text class="ml10">超警戒</text>
							</view>
							<view class="flex-cc">
								<image
									src="../../static/image/map/cbz.png"
									class="ml10"
									mode="widthFix"
									style="width: 40rpx; height: 40rpx"
								/>
								<text class="ml10">超保证</text>
							</view>
						</view>
					</template>
					<template v-if="type == 'work'">
						<view class="water-legend">
							<view class="flex-cc" @click="clickworkList('sdz')" :class="{ noChose: !workList.includes('sdz') }">
								<image src="../../static/image/map/work-sdz.png" mode="widthFix" style="width: 40rpx; height: 40rpx" />
								<text class="ml10">水电站</text>
							</view>
							<view class="flex-cc" @click="clickworkList('sk')" :class="{ noChose: !workList.includes('sk') }">
								<image src="../../static/image/map/work-sk.png" mode="widthFix" style="width: 40rpx; height: 40rpx" />
								<text class="ml10">水库</text>
							</view>

							<view class="flex-cc">
								<image
									src="../../static/image/map/work-cxx.png"
									class="ml20"
									mode="widthFix"
									style="width: 40rpx; height: 40rpx"
								/>
								<text class="ml10">超汛限</text>
							</view>
							<view class="flex-cc">
								<image
									src="../../static/image/map/work-cfhg.png"
									class="ml20"
									mode="widthFix"
									style="width: 40rpx; height: 40rpx"
								/>
								<text class="ml10">超正常高</text>
							</view>
						</view>
					</template>
					<template v-if="type == 'video'">
						<view class="water-legend">
							<!-- <view class="flex-cc">
								<image
									src="../../static/image/map/video-cg.png"
									mode="widthFix"
									style="width: 30rpx; max-height: 40rpx"
								/>
								<text class="ml10">城管监控</text>
							</view> -->

							<view class="flex-cc">
								<image
									class="ml20"
									src="../../static/image/map/video-sl.png"
									mode="widthFix"
									style="width: 30rpx; max-height: 40rpx"
								/>
								<text class="ml10">水利监控</text>
							</view>
						</view>
					</template>
					<template v-if="type == 'dzd'">
						<view class="water-legend">
							<view class="flex-cc" @click="clickDzdList('dzd-bt')" :class="{ noChose: !dzdList.includes('dzd-bt') }">
								<image src="../../static/image/map/dzd-bt.png" mode="widthFix" style="width: 30rpx; height: 30rpx" />
								<text class="ml10">崩塌</text>
							</view>
							<view
								class="flex-cc"
								@click="clickDzdList('dzd-dmbt')"
								:class="{ noChose: !dzdList.includes('dzd-dmbt') }"
							>
								<image src="../../static/image/map/dzd-dmbt.png" mode="widthFix" style="width: 30rpx; height: 30rpx" />
								<text class="ml10">地面崩塌</text>
							</view>
							<view class="flex-cc" @click="clickDzdList('dzd-nsl')" :class="{ noChose: !dzdList.includes('dzd-nsl') }">
								<image src="../../static/image/map/dzd-nsl.png" mode="widthFix" style="width: 30rpx; height: 30rpx" />
								<text class="ml10">泥石流</text>
							</view>
							<view class="flex-cc" @click="clickDzdList('dzd-hp')" :class="{ noChose: !dzdList.includes('dzd-hp') }">
								<image src="../../static/image/map/dzd-hp.png" mode="widthFix" style="width: 30rpx; height: 30rpx" />
								<text class="ml10">滑坡</text>
							</view>
							<view
								class="flex-cc"
								@click="clickDzdList('dzd-gdbp')"
								:class="{ noChose: !dzdList.includes('dzd-gdbp') }"
							>
								<image src="../../static/image/map/dzd-gdbp.png" mode="widthFix" style="width: 30rpx; height: 30rpx" />
								<text class="ml10">高陡边坡</text>
							</view>
						</view>
					</template>
				</view>
			</view>

			<!-- 图例图层图标 -->
			<view class="bot-type-list">
				<view
					class="icon-type mt20"
					style="width: 80rpx"
					@click="seeTotalRain('water')"
					v-show="type == 'water'"
					title="水情列表"
				>
					<i :class="`iconfont icon-a-wenben12 fs28`" style="font-size: 34rpx; font-weight: 550"></i>
					<text class="mt7 text nop fs26"> 列表</text>
				</view>

				<view
					class="icon-type mt20"
					style="width: 80rpx"
					@click="seeTotalRain('work')"
					v-show="type == 'work'"
					title="工情列表"
				>
					<i :class="`iconfont icon-a-wenben12 fs28`" style="font-size: 34rpx; font-weight: 550"></i>
					<text class="mt7 text nop fs26"> 列表</text>
				</view>

				<view
					class="icon-type mt20"
					style="width: 80rpx"
					@click="seeTotalRain('video')"
					v-show="type == 'video'"
					title="监控列表"
				>
					<i :class="`iconfont icon-a-wenben12 fs28`" style="font-size: 34rpx; font-weight: 550"></i>
					<text class="mt7 text nop fs26"> 列表</text>
				</view>

				<view
					class="icon-type mt20"
					style="width: 80rpx"
					@click="seeTotalRain('rain')"
					v-show="type == 'moreEle' && moreEle == 'rain'"
				>
					<i :class="`iconfont icon-a-wenben12 fs28`" style="font-size: 34rpx; font-weight: 550"></i>
					<text class="mt7 text nop fs26"> 总览</text>
				</view>

				<view
					class="icon-type mt20"
					style="width: 80rpx"
					@click="rainAccount"
					v-show="type == 'moreEle' && ['rain', 'F', 'T'].includes(moreEle)"
				>
					<i :class="`iconfont icon-a-tongji1  fs28`" style="font-size: 34rpx; font-weight: 550"></i>
					<text class="mt7 text nop fs26"> 统计</text>
				</view>
				<view class="icon-type mt20" :class="{ 'icon-type-ac': isPos }" style="width: 80rpx" @click="changePos">
					<i :class="`iconfont icon-dingweibai  fs28`" style="font-size: 34rpx; font-weight: 550"></i>
					<text class="mt7 text nop fs26"> 定位</text>
				</view>
				<view
					class="icon-type mt20"
					:class="{ 'icon-type-ac': isChoseWaterXi }"
					style="width: 80rpx"
					@click="addWaterXi"
				>
					<i :class="`iconfont icon-a-heliu11  fs28`" style="font-size: 34rpx; font-weight: 550"></i>
					<text class="mt7 text nop fs26"> 水系</text>
				</view>
				<!-- <view class="icon-type" style="width: 80rpx" @click="popupShow = true">
					<i :class="`iconfont icon-a-Vector4 fs24`" style="color: #607589"></i>
					<text class="mt10 text nop fs26"> 图层</text>
				</view> -->
				<view
					class="icon-type mt20"
					style="width: 80rpx"
					:class="{ 'icon-type-ac': legendShow }"
					@click="legendShow = !legendShow"
				>
					<i :class="`iconfont icon-fenlei  fs28`" style="font-size: 34rpx; font-weight: 550"></i>
					<text class="mt7 text nop fs26"> 图例</text>
				</view>
			</view>

			<view class="noTf" v-show="isNoTF">当前无台风</view>
		</view>
		<!-- 图层popup -->
		<u-popup v-model="popupShow" mode="bottom" border-radius="14" closeable close-icon="arrow-down-fill">
			<view class="bottom-map-base">
				<i :class="`iconfont icon-a-Vector4 fs24`" style="color: #0085ff"></i>
				<text class="ml20 fs32">图层</text>
			</view>
			<view style="width: 750rpx; height: 150rpx; padding: 20rpx 10rpx 0 80rpx">
				<u-checkbox-group width="220rpx">
					<u-checkbox
						@change="changeBase"
						v-model="item.checked"
						v-for="(item, index) in baseList"
						:key="item.value"
						:name="item.value"
						>{{ item.name }}</u-checkbox
					>
				</u-checkbox-group>
			</view>
		</u-popup>

		<!-- 站点点击弹窗 -->
		<u-popup v-model="sitePopupShow" mode="bottom" border-radius="14" closeable close-icon="arrow-down-fill">
			<!-- 70900601 -->
			<ec-swen v-if="ecTpye == 'swenz'" :nodeId="nodeId"></ec-swen>
			<!-- 71010606 -->
			<ec-swei v-if="ecTpye == 'swz'" :nodeId="nodeId"></ec-swei>
			<!-- 71011008 -->
			<ec-sk v-if="ecTpye == 'sk'" :nodeId="nodeId"></ec-sk>
			<!-- 70927106 -->
			<ec-rain v-if="ecTpye == 'rain'" :nodeId="nodeId"></ec-rain>

			<ec-rain-my v-if="ecTpye == 'rain-my'" :nodeId="nodeId" :timeliness="accHour"></ec-rain-my>

			<ec-moreEle :moreEle="moreEle" v-if="ecTpye == 'moreEle'" :nodeId="nodeId"></ec-moreEle>
		</u-popup>
		<!-- 视频modal   -->
		<u-modal
			v-model="videoShow"
			:show-title="false"
			:show-confirm-button="false"
			:mask-close-able="true"
			width="750rpx"
		>
			<view class="slot-content-modal" v-if="videoShow">
				<video
					id="video"
					:autoplay="true"
					:src="videoUrl"
					x5-video-player-type="h5"
					style="width: 750rpx"
					@play="playVedio()"
					@fullscreenchange="screenchange"
				/>
			</view>
		</u-modal>
		<!-- 地灾、 -->
		<u-modal v-model="dzdShow" :show-title="false" :show-confirm-button="false" :mask-close-able="true" width="650rpx">
			<view class="dzd-content-modal">
				<view v-html="dzdHtml" class="fs28"></view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import L, { map } from 'leaflet'
	import tool from '@/utils/tool.js'
	import simpleLegend from '@/components/common/simpleLegend.vue'
	import controlApi from '@/api/monitor/control.js'
	import moment from 'moment'
	import cbz from '../../static/image/map/cbz.png'
	import axios from 'axios'
	// import videoList from '../../static/video.js'
	import { getNewSpotByGrid } from '@/utils/mapUtils'
	import eleMoreMixin from './mixin'
	export default {
		components: {
			simpleLegend,
			playCpn: () => import('@/components/common/play.vue'),
			'tui-bubble-popup': () => import('@/components/common/tui-bubble-popup.vue'),
			'ec-rain': () => import('@/components/home/ec-rain.vue'),
			'ec-rain-my': () => import('@/components/home/ec-rain-my.vue'),
			'ec-swen': () => import('@/components/home/ec-swen.vue'),
			'ec-swei': () => import('@/components/home/ec-swei.vue'),
			'ec-sk': () => import('@/components/home/ec-sk.vue'),
			'ec-moreEle': () => import('@/components/home/ec-moreEle.vue'),
			listSelect: () => import('@/components/common/select/listSelect.vue'),
			playTimeSlider: () => import('@/components/common/playTimeSlider.vue')
		},
		mixins: [eleMoreMixin],
		data() {
			return {
				appHeight: 0,
				type: '',
				layerGroups: {},
				titles: [],
				// isSync 是否开启同步，意思就是能否同时存在

				leftTopList: [
					{
						name: '色斑图',
						value: 'spot',
						isSync: false,
						icon: 'icon-a-Group992',
						isActive: false,
						legendList: [
							tool.getLegendOptionsByKey('Rain', this.rainClck),
							tool.getLegendOptionsByKey('RainSingle', this.rainClck)
						]
					},
					{
						name: '多要素展示',
						value: 'moreEle',
						isSync: false,
						icon: 'icon-a-xiaoyu111',
						isActive: false,
						legendList: []
					},
					{
						name: '水    情',
						value: 'water',
						isSync: false,
						icon: 'icon-a-heliumian1',
						isActive: false,
						legendList: []
					},
					{
						name: '工    情',
						value: 'work',
						icon: 'icon-a-dazhongxingshuiku1',
						isSync: false,
						isActive: false,
						legendList: []
					},
					{
						name: '监    控',
						value: 'video',
						icon: 'icon-a-shipinzixun1',
						isSync: false,
						isActive: false,
						legendList: []
					},
					{
						name: '地灾点',
						value: 'dzd',
						icon: 'icon-a-dizhenzaihaifengxianqu1',
						isSync: false,
						isActive: false,
						legendList: []
					},
					{
						name: '雷    达',
						value: 'radar',
						icon: 'icon-Vector',
						isSync: false,
						isActive: false,
						list: [],
						legendList: [tool.getLegendOptionsByKey('radar37')]
					},
					{
						name: '云    图',
						value: 'cloud',
						icon: 'icon-a-Vector1',
						isSync: false,
						isActive: false,
						list: [],
						legendList: [tool.getLegendOptionsByKey('redCloud')]
					},
					{
						name: '台    风',
						value: 'typhoon',
						icon: 'icon-a-taifeng1',
						isSync: false,
						isActive: false,
						isPlay: false,
						legendList: []
					}
				],

				elementList: [
					{
						label: '雨情',
						value: 'rain',
						isSync: false,
						icon: 'icon-a-xiaoyu111',
						isActive: false,
						legendList: [
							tool.getLegendOptionsByKey('Rain', this.rainClck),
							tool.getLegendOptionsByKey('RainSingle', this.rainClck)
						],
						extra: 0
					},
					{
						label: '气温',
						value: 'T',
						isSync: false,
						icon: 'icon-a-xiaoyu111',
						isActive: false,
						legendList: [tool.getLegendOptionsByKey('T', this.rainClck)],
						extra: 1
					},
					{
						label: '风情',
						value: 'F',
						isSync: false,
						icon: 'icon-a-xiaoyu111',
						isActive: false,
						legendList: [tool.getLegendOptionsByKey('F', this.rainClck)],
						extra: 2
					},
					{
						label: '湿度',
						value: 'RH',
						isSync: false,
						icon: 'icon-a-xiaoyu111',
						isActive: false,
						legendList: [tool.getLegendOptionsByKey('RH', this.rainClck)],
						extra: 3
					},
					{
						label: '能见度',
						value: 'V',
						isSync: false,
						icon: 'icon-a-xiaoyu111',
						isActive: false,
						legendList: [tool.getLegendOptionsByKey('V', this.rainClck)],
						extra: 4
					}
				],

				moreEle: 'rain',
				isNoTF: false,

				// 时间轴
				cloudList: [],
				radarList: [],

				hourList: [
					{ label: '近1小时', value: 1 },
					{ label: '近3小时', value: 3 },
					{ label: '近6小时', value: 6 },
					{ label: '近12小时', value: 12 },
					{ label: '近24小时', value: 24 }
				],
				accHour: 1,

				legendShow: true,

				popupShow: false,
				sitePopupShow: false,

				ecTpye: '',
				nodeId: '',
				clickItem: {},
				selfDataList: [],
				ecData: {},

				baseList: [
					{ name: '行政区域', checked: true, value: '1' },
					{ name: '水系', checked: false, value: '2' },
					{ name: '水电站', checked: false, value: '3' },
					{ name: '水闸', checked: false, value: '4' },
					{ name: '泵站', checked: false, value: '5' },
					{ name: '堤防', checked: false, value: '6' }
				],

				videoUrl: '',
				videoShow: false,

				dzdHtml: '',
				dzdShow: false,

				waterList: ['swz', 'swenz'],
				dzdList: ['dzd-bt', 'dzd-dmbt', 'dzd-nsl'],
				workList: ['sdz', 'sk'],
				isChoseWaterXi: false,

				begin: moment().add(-24, 'hours').format('YYYY-MM-DD HH:mm:00'),
				end: moment().format('YYYY-MM-DD HH:mm:00'),

				rainValue: 0, // 雨量显示阈值
				loading: false,

				isPos: false,

				videoList: []
			}
		},
		computed: {
			selectLegendList() {
				let list = this.leftTopList
				let le = list.find((item) => item.value == this.type)
				if (this.type == 'spot') {
					return le.legendList.filter((el) => {
						if (this.accHour == 1) {
							return el.legendData.type == 'RainSingle'
						} else {
							return el.legendData.type == 'Rain'
						}
					})
				} else if (this.type == 'moreEle') {
					let eleList = this.elementList
					let le2 = eleList.find((item) => item.value == this.moreEle)
					if (this.moreEle == 'rain') {
						return le2.legendList.filter((el) => {
							if (this.accHour == 1) {
								return el.legendData.type == 'RainSingle'
							} else {
								return el.legendData.type == 'Rain'
							}
						})
					} else {
						return le2 ? le2.legendList : []
					}
				} else {
					return le ? le.legendList : []
				}
			}
		},
		onLoad(options) {
			if (options && options.type) {
				// this.type = options.type
				setTimeout(() => {
					this.initPage(options.type)
				}, 500)
			}
		},
		async mounted() {
			this.initVideoList()
			this.appHeight = await this.$getHeight('.nav-custom')
			uni.$on('flyMap', (item) => {
				this.flyMap(item)
			})
			uni.$on('mapTypeChage', (item) => {
				// const data = this.elementList.find((el) => el.value == item.value)
				this.moreEle = item.value
				this.changeElement()
			})
		},
		beforeDestroy() {
			uni.$off('flyMap')
			uni.$off('mapTypeChage')
		},
		methods: {
			async initVideoList() {
				try {
					let resp = await controlApi.getCameraData()
					if (resp.data) {
						this.videoList = resp.data.https || []
					}
					console.info(`resp:`, resp)
				} catch (error) {
					console.error(error)
				}
			},

			rainClck(vale) {
				this.rainValue = vale.min
				this.filterIndex = vale.index
				if (this.moreEle == 'rain') {
					this.initByrain(true, true)
				} else {
					this.initBydefault(true, true, this.moreEle)
				}
			},
			mapDone(map) {
				this.map = map
				// 初始化图层组
				this.mapGroups = L.baseLayerGroup().addTo(map)

				const addLayerEv = (key) => {
					let layer = L.baseLayerGroup()
					layer.key = key
					this.mapGroups.addLayer(layer)
					return layer
				}
				// 初始化图层组-小类
				this.layerGroups = {
					spot: addLayerEv('spot'),
					rain: addLayerEv('rain'),
					water: addLayerEv('water'),
					work: addLayerEv('work'),
					video: addLayerEv('video'),
					dzd: addLayerEv('dzd'),

					radar: addLayerEv('radar'),
					cloud: addLayerEv('cloud'),
					typhoon: addLayerEv('typhoon'),

					base: addLayerEv('base'),

					alone: addLayerEv('alone'),
					moreEle: addLayerEv('moreEle')
				}
				// this.initPage()
			},
			flyMap({ lat, lon, zoom = 6 }) {
				setTimeout(() => {
					this.map.invalidateSize(true)
					this.map.flyTo([lat, lon], zoom)
				}, 500)
			},
			async initPage(type) {
				// 获取所有站点
				// const resp = await controlApi.getAll()
				const item = this.leftTopList.find((item) => item.value == type)
				this.iconTyCG(item)
			},
			// 现在是单选模式
			iconTyCG(item) {
				if (this.loading) {
					return
				}
				// 现在是单选模式
				// if (item.value == this.type) {
				// 	return
				// }
				const checked = (value, isActive) => {
					switch (value) {
						case 'spot':
							// item.isActive = !item.isValAsc
							// this.leftTopList[0].isActive = !this.leftTopList[0].isActive
							this.initByspot(isActive)
							break
						case 'rain':
							this.initByrain(isActive)
							break
						case 'cloud':
							this.initBycloud(isActive)
							break
						case 'radar':
							this.initByradar(isActive)
							break
						case 'water':
							this.initBywater(isActive)
							break
						case 'work':
							this.initBywork(true, isActive)
							break
						case 'video':
							this.initByvideo(isActive)
							break
						case 'dzd':
							this.initBydzd(isActive)
							break
						case 'typhoon':
							this.initBytyphoon(isActive)
							break
						case 'moreEle':
							this.initBymoreEle(isActive, this.moreEle)
							break
					}
				}
				let oldType = this.type
				this.type = item.value
				this.isNoTF = false

				// if(['spot','rain'].includes( this.type) ){

				// }
				item.isActive = !item.isActive
				checked(item.value, item.isActive)

				let lastList = this.leftTopList.filter((el) => {
					return el.isActive && el.value != this.type
				})

				const delEme = (value) => {
					let index = this.leftTopList.findIndex((v) => v.value == value)
					this.leftTopList[index].isActive = false
					checked(value, false)
				}
				// 多余的去掉
				lastList.filter((el) => {
					if (this.type == 'radar') {
						if (['moreEle', 'spot'].includes(el.value)) {
							return
						} else {
							delEme(el.value)
						}
					} else if (['moreEle', 'spot'].includes(this.type)) {
						if (['radar'].includes(el.value)) {
							return
						} else {
							delEme(el.value)
						}
					} else {
						delEme(el.value)
					}
				})

				// if (this.type == 'radar') {
				// 	item.isActive = !item.isActive
				// } else {
				// 	// checked(oldType, false)
				// 	// checked(item.value, item.isActive)
				// 	this.leftTopList.forEach((el) => {
				// 		if( el.value==radar){

				// 		}else{
				// 		el.isActive = false

				// 		}
				// 		if (item.value == el.value) {
				// 			el.isActive = true
				// 		}
				// 	})
				// }
				// if (!['radar'].includes(this.type)) {
				// 	if (this.layerGroups.alone) {
				// 		this.layerGroups.alone.clearLayers()
				// 		this.setTitle('', 'alone', 'del')
				// 	}
				// }
			},
			CGaccHour(value) {
				// this.accHour = value
				this.$nextTick(() => {
					if (this.type == 'moreEle') {
						this.initBymoreEle(true, this.moreEle)
					} else {
						this.initByspot(true, this.moreEle)
					}
				})
			},

			// 多元素点击
			initBymoreEle(isActive, type) {
				switch (type) {
					case 'rain':
						this.initByrain(isActive)
						break
					default:
						this.initBydefault(isActive, false, type)
				}
			},
			changeElement(value, items) {
				this.$nextTick(() => {
					this.leftTopList[1].isActive = false
					// this.initBymoreEle(true, items.value)
					this.iconTyCG(this.leftTopList[1])
				})
			},
			// 雨情 useCacheData使用缓存
			async initByrain(isActive, useCacheData = false) {
				try {
					if (!isActive && this.layerGroups.moreEle) {
						this.layerGroups.moreEle.clearLayers()
						this.setTitle('', 'rain', 'del')
						this.rainValue = 0
						this.filterIndex = 0
						return
					}
					if (this.layerGroups.moreEle) {
						this.layerGroups.moreEle.clearLayers()
					}
					this.$nextTick(() => {
						this.$refs.simpleLegend[0].setIndex(this.filterIndex)
					})

					let getUserInfoData = uni.getStorageSync('getUserInfoData')
					let areaCode = getUserInfoData.dept.code
					let areaLevel = getUserInfoData.dept.areaLevel
					let obj = {
						0: 'CITY',
						1: 'COUNTY',
						2: 'TOWNSHIP'
					}
					let siteList = []
					if (useCacheData) {
						siteList = this.rain_resp
					} else {
						uni.showLoading({
							title: '正在加载'
						})
						this.loading = true
						const rain = await controlApi.stationToLogtdLattd('WPStationPP')
						let resp = await controlApi.getMagnitudeRainAreaByType({
							areaId: '350400000000', //parseFloat(areaCode),
							begin: moment().subtract('hours', this.accHour).format('YYYY-MM-DD HH:mm:ss'), //  '2022-06-12 10:08:15',
							end: moment().format('YYYY-MM-DD HH:mm:ss'), // '2022-06-13 10:08:15',
							type: 'CITY', // obj[areaLevel], // areaCode == '350400000000' ? 'CITY' : 'COUNTY',
							projectId: '3bc0fb05339a46d7966a7abac9fc3516'
						})
						// this.rain_dataList=[]
						const { data } = resp
						this.loading = false
						let arrList = []
						let listArr = data.data
						listArr.forEach((town) => {
							town.lstCounty.forEach((el) => {
								if (el.lstTown) {
									el.lstTown.forEach((sin) => {
										arrList.push(...sin.sites)
									})
								}
							})
						})
						let dataObj = {}
						arrList.map((el) => {
							dataObj[el.stcd] = el.drp
						})
						this.rain_resp = rain.data.features.map((el) => {
							el.drp = dataObj[el.properties.stcd] || 0
							return el
						})
						siteList = this.rain_resp
						this.$hideLoading()
					}

					// .collision({ margin: 20 })
					let siteLayer = L.featureGroup().addTo(this.layerGroups.moreEle)
					let legend = tool.getLegendItem('Rain')
					// 打点
					siteList.forEach((info) => {
						let sin = info.properties
						sin.drp = info.drp
						if (sin.drp < this.rainValue) {
							return
						}
						const { bgColor, index } = tool.getColorIndex(legend, sin.drp)
						let fontColor = '#000' // 默认黑色
						if (index > 1) {
							fontColor = '#fff'
						}
						// <div style='background:${bgColor}'></div>
						if (!sin.latitude || !sin.longitude) {
							return
						}

						let html = ''
						if (sin.drp > 999) {
							html = `  <div class='circle-legend'  style='background:${bgColor}'></div>   `
						} else {
							html = `
								<div class='map-town-legend rain-popup' style='background:${bgColor};color:${fontColor};display:none'>
										<span> ${sin.stnm}  ${sin.drp}${legend.unit}</span>
								   <div class='borderTop' style='background:${bgColor}'></div>
								       </div>
								   <div class='circle-legend'  style='background:${bgColor}'></div>
								   `
						}
						this.rainSiteList = siteList
						L.marker([sin.latitude, sin.longitude], {
							icon: L.divIcon({
								className: 'map-town-legend-style',
								html: html
							})
						})
							.on('click', (e) => {
								this.ecTpye = 'rain'
								this.nodeId = sin.stcd
								this.sitePopupShow = true
							})

							.addTo(siteLayer)
					})
					// 	let domList = document.querySelectorAll('.rain-popup')
					// domList = Array.from(domList)
					const evAdd = () => {
						// 市级显示
						if (this.map._zoom < 8.7 && this.rain_zoom > 8.7) {
							this.rain_zoom = this.map._zoom
							let domList = document.querySelectorAll('.rain-popup')
							domList = Array.from(domList)
							domList.forEach((el) => (el.style.display = 'none'))
						}

						if (this.map._zoom > 8.7 && (this.rain_zoom < 8.7 || this.map._zoom == this.rain_zoom)) {
							this.rain_zoom = this.map._zoom
							let domList = document.querySelectorAll('.rain-popup')
							domList = Array.from(domList)
							domList.forEach((el) => (el.style.display = 'flex'))
						}
					}
					if (!this.rain_zoom) {
						this.rain_zoom = this.map._zoom
					}
					evAdd()
					this.map.on('zoomend', (e) => {
						if (this.type != 'moreEle') {
							// this.map.off('zoomend')
							return
						}
						evAdd()
					})
					this.setTitle((moment().format('YYYY-MM-DD HH:mm') || '') + ' 雨量站', 'rain')
				} catch (error) {
					console.error(error)
					this.$hideLoading()
					this.loading = false
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},
			// 加载色斑图
			async initByspot(isActive) {
				try {
					if (!isActive && this.layerGroups.spot) {
						this.layerGroups.spot.clearLayers()
						this.setTitle('', 'spot', 'del')
						return
					}
					if (this.layerGroups.spot) {
						this.layerGroups.spot.clearLayers()
					}
					this.loading = true
					const rain = await controlApi.stationToLogtdLattd('WPStationPP')

					let resp = await controlApi.getMagnitudeRainAreaByType({
						areaId: '350400000000', //parseFloat(areaCode),
						begin: moment().subtract('hours', this.accHour).format('YYYY-MM-DD HH:mm:ss'), //  '2022-06-12 10:08:15',
						end: moment().format('YYYY-MM-DD HH:mm:ss'), // '2022-06-13 10:08:15',
						type: 'CITY', // obj[areaLevel], // areaCode == '350400000000' ? 'CITY' : 'COUNTY',
						projectId: '3bc0fb05339a46d7966a7abac9fc3516'
					})
					const { data } = resp
					let arrList = []
					let listArr = data.data
					listArr.forEach((town) => {
						town.lstCounty.forEach((el) => {
							if (el.lstTown) {
								el.lstTown.forEach((sin) => {
									arrList.push(...sin.sites)
								})
							}
						})
					})
					arrList.map((el) => {
						el.lat = parseFloat(el.latitude)
						el.lon = parseFloat(el.longitude)
						el.value = el.drp || 0
						return el
					})
					let dataObj = {}
					arrList.map((el) => {
						dataObj[el.stcd] = el.drp
					})

					let siteList = []
					rain.data.features.map((el) => {
						siteList.push({
							lat: parseFloat(el.properties.latitude),
							lon: parseFloat(el.properties.longitude),
							value: dataObj[el.properties.stcd] || 0
						})
					})
					siteList = siteList.filter((el) => el.lat && el.lon)

					let legend = tool.getLegendItem('Rain')
					let layer = getNewSpotByGrid(this.layerGroups.spot, siteList, legend, {
						bounds: L.geoJSON(window.boundJson).getBounds()
					})
					console.info(`3244:`)
					// const resp = await controlApi.getStainChart({
					// 	timeliness: this.accHour,
					// 	areaCode: '350400',
					// 	element: 'Rain'
					// 	// legendType: 'Rain'
					// })
					this.loading = false
					// const { data } = resp
					// const playData = {
					// 	filePath: data.picBase64,
					// 	latMin: data.mapExtent.ymin,
					// 	lonMax: data.mapExtent.xmax,
					// 	latMax: data.mapExtent.ymax,
					// 	lonMin: data.mapExtent.xmin
					// }
					// var bounds = [
					// 	[playData.latMin, playData.lonMax],
					// 	[playData.latMax, playData.lonMin]
					// ]
					// let url = playData.filePath
					// let layer = L.imageOverlay(url, bounds, {
					// 	pane: 'tilePane',
					// 	className: 'demo',
					// 	opacity: 0.5
					// })
					this.setTitle((data.curHour || '') + '色斑图', 'spot')
					this.layerGroups.spot.addLayer(layer)
					// this.map.fitBounds(layer.getBounds())
					this.map.fitBounds(L.geoJSON(window.boundJson).getBounds())
				} catch (error) {
					console.error(error)
					this.loading = false
				}
			},
			// 云图
			async initBycloud(isActive) {
				if (!isActive && this.layerGroups.cloud) {
					this.layerGroups.cloud.clearLayers()
					this.setTitle('', 'cloud', 'del')
					return
				}
				this.cloudList = []
				uni.showLoading({
					title: '正在加载'
				})
				try {
					this.loading = true
					const resp = await controlApi.getRadarCloundImg({
						pageNo: 1,
						pageSize: 10,
						Category: 50,
						productId: 0,
						Level: 0,
						AccHour: 1,
						// StartTime: time.data,
						SiteNo: 'FY4A_B12_R040'
					})
					this.loading = false
					this.$hideLoading()
					this.imageOverlayr = null
					if (resp.success) {
						const { data } = resp
						this.cloudList = data.rows.map((item, index) => {
							item.index = index
							item.desc = moment(item.cTime).format('HH:mm')
							return item
						})
						this.$nextTick(() => {
							if (this.cloudList.length > 0) {
								this.$refs.cloudSlider.setIndex(this.cloudList.length - 1)
								this.playCloud(this.cloudList.length - 1, true)
							}
						})
					} else {
						this.$hideLoading()
						// uni.showToast({
						// 	icon: 'error',
						// 	title: '获取失败'
						// })
					}
				} catch (error) {
					console.error(error)
					this.$hideLoading()
					this.loading = false
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},

			playCloud(index, fit) {
				let playData = this.cloudList[index]
				if (!playData) {
					return
				}
				// var bounds2 = [
				// 	[playData.latMin, playData.lonMax],
				// 	[playData.latMax, playData.lonMin]
				// ]
				// console.info(`bounds2:`, bounds2)
				// var bounds = [
				// 	[-0.65, 147.637],
				// 	[60.618, 72.319]
				// ]
				var bounds = [
					[playData.latMin, playData.lonMax],
					[playData.latMax, playData.lonMin]
				]
				let groups = this.layerGroups.cloud
				const url = playData.filePath
				if (!this.imageOverlayr) {
					this.imageOverlayr = L.imgLayer(url, bounds, {
						pane: 'tilePane',
						className: 'demo'
					}).addTo(groups)
					//
				} else {
					this.imageOverlayr.setBounds(bounds)
					this.imageOverlayr.setUrl(url)
				}
				// this.map.flyTo([24.908853, 118.589421], 5)
				this.setTitle(playData.title + ' 云图', 'cloud')
				var polygon = L.polygon(bounds)
				if (fit) {
					this.map.fitBounds(polygon.getBounds())
				}
			},

			// playEV(index, type) {
			// 	if (type == 'cloud') {
			// 		this.playCloud(index)
			// 	} else {
			// 		this.playRadar(index)
			// 	}
			// },
			// 雷达
			async initByradar(isActive) {
				if (!isActive && this.layerGroups.radar) {
					this.layerGroups.radar.clearLayers()
					this.setTitle('', 'radar', 'del')
					return
				}
				this.radarList = []
				uni.showLoading({
					title: '正在加载'
				})
				try {
					this.loading = true
					const resp = await controlApi.getRadarCloundImg({
						pageNo: 1,
						pageSize: 10,
						Category: 1,
						SiteNo: '00000',
						productId: 0,
						Level: 0
					})
					this.loading = false
					this.radarImg = null
					this.$hideLoading()
					if (resp.success) {
						const { data } = resp
						this.radarList = data.rows.map((item, index) => {
							item.index = index
							item.desc = moment(item.cTime).format('HH:mm')
							return item
						})
						this.$nextTick(() => {
							if (this.radarList.length > 0) {
								this.$refs.radarSlider.setIndex(this.radarList.length - 1, true)
								this.playRadar(this.radarList.length - 1, true)
							}
						})
					} else {
						this.$hideLoading()
						// uni.showToast({
						// 	icon: 'error',
						// 	title: '获取失败'
						// })
					}
				} catch (error) {
					console.error(error)
					this.loading = false
					this.$hideLoading()
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},
			playRadar(index, fit) {
				// this.$slots.default
				let playData = this.radarList[index]
				if (!playData) {
					return
				}
				var bounds = [
					[playData.latMin, playData.lonMax],
					[playData.latMax, playData.lonMin]
				]
				// var bounds = [
				// 	[-0.65, 147.637],
				// 	[60.618, 72.319]
				// ]

				let group = this.layerGroups.radar
				const url = playData.filePath
				if (!this.radarImg) {
					this.radarImg = L.imgLayer(url, bounds, {
						pane: 'tilePane',
						opacity: 0.85,
						pixelate: true,
						className: 'demo'
					}).addTo(group)
					//
				} else {
					this.radarImg.setBounds(bounds)
					this.radarImg.setUrl(url)
				}
				// this.map.flyTo([24.908853, 118.589421], 5)
				this.setTitle(playData.title + ' 雷达', 'radar')
				var polygon = L.polygon(bounds)
				if (fit) {
					this.map.fitBounds(polygon.getBounds())
				}
			},
			// 水
			// outZZAlarm 超警戒水位 outZZGuarantys超保证水位 outAlarms超警戒水位数量、ZQ水文站类似，outRRXhs 超汛限水库 outRRFhControls 超保证水库 count就是对应数量
			// alarmZ保证水位 Q就是流量  waterLev当前水位 outWarn超出的值 guarantyZ 保证水位，xhZ就是汛限水位 fhZ就是防洪高水位 quarantity就是流量 outQuarantity就是超出流量
			async initBywater(isActive, reload = true) {
				try {
					if (!isActive && this.layerGroups.water) {
						this.layerGroups.water.clearLayers()
						this.setTitle('', 'water', 'del')
						return
					}

					let resp = {}
					if (reload) {
						uni.showLoading({
							title: '正在加载'
						})
						this.loading = true
						let getUserInfoData = uni.getStorageSync('getUserInfoData')
						let areaCode = getUserInfoData.dept.code
						let areaLevel = getUserInfoData.dept.areaLevel
						let obj = {
							0: 'CITY',
							1: 'COUNTY',
							2: 'TOWNSHIP'
						}
						let params = {
							areaId: '350400000000',
							type: 'CITY', // areaCode == '350400000000' ? 'CITY' : 'COUNTY',
							stationType: 'WPStationZQ,WPStationZZ',
							begin: this.begin, // '2023-05-21 10:08:49',
							end: this.end, // '2023-05-22 10:08:49',
							projectId: '3bc0fb05339a46d7966a7abac9fc3516'
						}
						let respAndchaoData = await axios.all([controlApi.regimenAllQuery(params), controlApi.regimenQuery(params)])
						resp = respAndchaoData[0] // await controlApi.regimenAllQuery(params)
						this.zqzzData = resp
						this.loading = false
						// 超出的数据
						let chaoData = respAndchaoData[1] //await controlApi.regimenQuery(params)
						const { data } = chaoData
						let WPStationZQ = []
						data.WPStationZQ.outZQAlarms.map((el) => {
							el.type = 'swenz'
							el.icon = '/static/image/map/cjj.png'
							WPStationZQ.push(el)
							return el
						})
						data.WPStationZQ.outZQGuarantys.map((el) => {
							el.type = 'swenz'
							el.icon = '/static/image/map/cbz.png'
							WPStationZQ.push(el)
							return el
						})

						let WPStationZZ = []
						data.WPStationZZ.outZZAlarm.map((el) => {
							el.type = 'swz'
							el.icon = '/static/image/map/cjj.png'
							WPStationZZ.push(el)
							return el
						})
						data.WPStationZZ.outZZGuarantys.map((el) => {
							el.type = 'swz'
							el.icon = '/static/image/map/cbz.png'
							WPStationZZ.push(el)
							return el
						})

						let chaoListData = WPStationZQ.concat(WPStationZZ)
						this.chaoListDataIds = chaoListData.map((el) => el.id)
						if (!this.chaoZQZZLayer) {
							this.chaoZQZZLayer = L.featureGroup()
						}
						this.chaoZQZZLayer.clearLayers()
						this.loading = false
						chaoListData.forEach((item) => {
							L.marker([item.latitude, item.longitude], {
								zIndexOffset: 1000,
								icon: L.divIcon({
									className: 'map-town-legend-style',
									iconSize: [25, 25],
									html: `
								<div class='map-town-legend rain-popup  waterShow'  style='display:none'>
										<span> ${item.name} </span>
										<div class='borderTop' style='background:#fff'></div>
								       </div>
								<img src="${item.icon}" style='width:25px' alt="" srcset=""/>

								`
								})
							})
								.on('click', (e) => {
									this.ecTpye = item.type // 'swen'
									this.nodeId = item.id
									this.sitePopupShow = true
								})
								.addTo(this.chaoZQZZLayer)
						})
						this.$hideLoading()
					} else {
						resp = this.zqzzData
					}

					const { data } = resp

					//水文站
					let WPStationZQ = data.WPStationZQ.map((el) => {
						el.type = 'swenz'
						el.icon = '/static/image/map/swenz.png'
						return el
					})
					// 	// 水位站
					let WPStationZZ = data.WPStationZZ.map((el) => {
						el.type = 'swz'
						el.icon = '/static/image/map/swz.png'
						return el
					})

					let allList = WPStationZQ.concat(WPStationZZ)
					this.layerGroups.water.clearLayers()

					this.ZQZZsiteLayer = L.featureGroup.collision({ margin: 20 })
					this.ZQZZimportLayer = L.featureGroup()
					allList.forEach((item) => {
						if (!this.waterList.includes(item.type)) {
							return
						}
						// 已经展示敬畏超位数据，就不展示基本点
						if (this.chaoListDataIds.includes(item.stcd)) {
							return
						}
						const dataMaker = L.marker([item.lttd, item.lgtd], {
							icon: L.divIcon({
								className: 'map-town-legend-style',
								iconSize: [25, 25],
								html: `
								<div class='map-town-legend rain-popup waterShow '  style='display:none'>
										<span> ${item.stnm} </span>
										<div class='borderTop' style='background:#fff'></div>
								       </div>
								<img src="${item.icon}" style='width:25px' alt="" srcset=""/>

								`
							})
						}).on('click', (e) => {
							this.ecTpye = item.type
							this.nodeId = item.stcd
							this.sitePopupShow = true
						})

						this.ZQZZsiteLayer.addLayer(dataMaker)
						if (/梅列|永安|沙县/.test(item.stnm) && item.type == 'swenz') {
							this.ZQZZimportLayer.addLayer(dataMaker)
						}
						dataMaker.data = item
					})

					const evAdd = () => {
						if (this.waterList.includes('swenz')) {
							// 市级显示
							if (this.map._zoom < 7.3) {
								this.layerGroups.water.removeLayer(this.ZQZZsiteLayer)
								this.layerGroups.water.addLayer(this.ZQZZimportLayer)
								let domList = document.querySelectorAll('.waterShow')
								domList = Array.from(domList)
								domList.forEach((el) => (el.style.display = 'none'))
							} else {
								this.layerGroups.water.removeLayer(this.ZQZZimportLayer)
								this.layerGroups.water.addLayer(this.ZQZZsiteLayer)
								setTimeout(() => {
									let domList = document.querySelectorAll('.waterShow')
									domList = Array.from(domList)
									domList.forEach((el) => (el.style.display = 'flex'))
								}, 500)
							}
						} else {
							this.layerGroups.water.removeLayer(this.ZQZZimportLayer)
							this.layerGroups.water.addLayer(this.ZQZZsiteLayer)
						}
					}
					evAdd()
					this.map.on('zoomend', (e) => {
						if (this.type != 'water') {
							// this.map.off('zoomend')
							return
						}
						evAdd()
					})
					// 加载超出的数据
					this.layerGroups.water.addLayer(this.chaoZQZZLayer)
				} catch (error) {
					console.error(error)
					this.$hideLoading()
					this.loading = false
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},

			clickwaterList(value) {
				let index = this.waterList.findIndex((el) => el == value)
				if (index > -1) {
					this.waterList.splice(index, 1)
				} else {
					this.waterList.push(value)
				}
				this.$nextTick(() => {
					this.initBywater(true, false)
				})
			},

			// 工
			async initBywork(reload = true, isActive) {
				try {
					if (!isActive && this.layerGroups.work) {
						this.layerGroups.work.clearLayers()
						this.setTitle('', 'work', 'del')
						return
					}

					let resp = {}
					if (reload) {
						uni.showLoading({
							title: '正在加载'
						})
						this.loading = true
						let getUserInfoData = uni.getStorageSync('getUserInfoData')
						let areaCode = getUserInfoData.dept.code
						let areaLevel = getUserInfoData.dept.areaLevel
						let obj = {
							0: 'CITY',
							1: 'COUNTY',
							2: 'TOWNSHIP'
						}
						let params = {
							areaId: '350400000000',
							type: 'CITY', //   areaCode == '350400000000' ? 'CITY' : 'COUNTY',
							stationType: 'WPStationRR',
							begin: this.begin, //'2023-05-21 10:08:49',
							end: this.end, // '2023-05-22 10:08:49',
							projectId: '3bc0fb05339a46d7966a7abac9fc3516'
						}

						let respAndchaoData = await axios.all([controlApi.regimenAllQuery(params), controlApi.regimenQuery(params)])
						resp = respAndchaoData[0] // await controlApi.regimenAllQuery(params)

						this.rrData = resp
						// 水电站数据
						const sdzData = await controlApi.stationToLogtdLattd('WPStationHP')
						this.loading = false
						let sdzList = []
						sdzData.data.features.forEach((el) => {
							let item = el.properties
							sdzList.push({
								lttd: item.latitude,
								lgtd: item.longitude,
								stnm: item.name,
								type: 'sdz',
								icon: '/static/image/map/work-sdz.png',
								data: item
							})
						})
						this.sdzList = sdzList
						// 超出的数据
						let chaoData = respAndchaoData[1] // await controlApi.regimenQuery(params)
						const { data } = chaoData
						let WPStationRR = []
						if (data.WPStationRR.newOutRRXhs) {
							let newOutRRXhs = data.WPStationRR.newOutRRXhs
							// 小水库不显示超 讯限
							newOutRRXhs.outRRXHsSmall.map((el) => {
								el.type = 'sk'
								el.icon = '/static/image/map/work-sk.png'
								WPStationRR.push(el)
								return el
							})
							newOutRRXhs.outRRXHsLargeToMedium.map((el) => {
								el.type = 'sk'
								el.icon = '/static/image/map/work-cxx.png'
								WPStationRR.push(el)
								return el
							})
						}

						if (data.WPStationRR.newOutRRFhControls) {
							let newOutRRFhControls = data.WPStationRR.newOutRRFhControls
							newOutRRFhControls.outRRFhControlsSmall.map((el) => {
								el.type = 'sk'
								el.icon = '/static/image/map/work-cfhg.png'
								WPStationRR.push(el)
								return el
							})
							newOutRRFhControls.outRRFhControlsLargeToMedium.map((el) => {
								el.type = 'sk'
								el.icon = '/static/image/map/work-cfhg.png'
								WPStationRR.push(el)
								return el
							})
						}

						this.chaoListRRDataIds = WPStationRR.map((el) => el.id)
						if (!this.chaoRRLayer) {
							this.chaoRRLayer = L.featureGroup()
						}
						this.chaoRRLayer.clearLayers()

						WPStationRR.forEach((item) => {
							L.marker([item.latitude, item.longitude], {
								zIndexOffset: 1000,
								icon: L.divIcon({
									className: 'map-town-legend-style',
									iconSize: [25, 25],
									html: `
								<div class='map-town-legend rain-popup  workShow'  style='display:none'>
										<span> ${item.name} </span>
										<div class='borderTop' style='background:#fff'></div>
								       </div>
								<img src="${item.icon}" style='width:25px' alt="" srcset=""/>
								`
								})
							})
								.on('click', (e) => {
									this.ecTpye = item.type // 'swen'
									this.nodeId = item.id
									this.sitePopupShow = true
								})
								.addTo(this.chaoRRLayer)
						})
						this.$hideLoading()
					} else {
						resp = this.rrData
					}

					const { data } = resp

					//水库
					let WPStationRR = data.WPStationRR.map((el) => {
						el.type = 'sk'
						el.icon = '/static/image/map/work-sk.png'
						return el
					})

					let allList = WPStationRR.concat(this.sdzList)
					this.layerGroups.work.clearLayers()

					this.RRsiteLayer = L.featureGroup.collision({ margin: 20 })
					this.RRimportLayer = L.featureGroup()
					allList.forEach((item) => {
						if (!this.workList.includes(item.type)) {
							return
						}
						// 已经展示敬畏超位数据，就不展示基本点
						if (this.chaoListRRDataIds.includes(item.stcd)) {
							return
						}
						const dataMaker = L.marker([item.lttd.replace(',', ''), item.lgtd.replace(',', '')], {
							icon: L.divIcon({
								className: 'map-town-legend-style',
								iconSize: [25, 25],
								html: `
								<div class='map-town-legend rain-popup workShow'  style='display:none'>
										<span> ${item.stnm} </span>
										<div class='borderTop' style='background:#fff'></div>
								       </div>
								<img src="${item.icon}" style='width:25px' alt="" srcset=""/>
								`
							})
						}).on('click', (e) => {
							if (item.type == 'sk') {
								this.ecTpye = item.type
								this.nodeId = item.stcd
								this.sitePopupShow = true
							} else {
								uni.navigateTo({
									url: '/pages-subPackages/monitor/sdzDetai?data=' + encodeURIComponent(JSON.stringify(item.data))
								})
							}
						})
						this.RRsiteLayer.addLayer(dataMaker)
						if (/安砂|街面|水东|池潭/.test(item.stnm) && item.type == 'sk') {
							this.RRimportLayer.addLayer(dataMaker)
						}
						dataMaker.data = item
					})
					const evAdd = () => {
						if (this.workList.includes('sk')) {
							// 市级显示
							if (this.map._zoom < 7.3) {
								this.layerGroups.work.removeLayer(this.RRsiteLayer)
								this.layerGroups.work.addLayer(this.RRimportLayer)
								let domList = document.querySelectorAll('.workShow')
								domList = Array.from(domList)
								domList.forEach((el) => (el.style.display = 'none'))
							} else {
								this.layerGroups.work.removeLayer(this.RRimportLayer)
								this.layerGroups.work.addLayer(this.RRsiteLayer)
								setTimeout(() => {
									let domList = document.querySelectorAll('.workShow')
									domList = Array.from(domList)
									domList.forEach((el) => (el.style.display = 'flex'))
								}, 500)
							}
						} else {
							this.layerGroups.work.removeLayer(this.RRimportLayer)
							this.layerGroups.work.addLayer(this.RRsiteLayer)
						}
					}
					evAdd()
					this.map.on('zoomend', (e) => {
						if (this.type != 'work') {
							// this.map.off('zoomend')
							return
						}
						evAdd()
					})
					// 加载超出的数据
					this.layerGroups.work.addLayer(this.chaoRRLayer)
				} catch (error) {
					console.error(error)
					this.$hideLoading()
					this.loading = false
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},
			clickworkList(value) {
				let index = this.workList.findIndex((el) => el == value)
				if (index > -1) {
					this.workList.splice(index, 1)
				} else {
					this.workList.push(value)
				}
				this.$nextTick(() => {
					this.initBywork(false, true)
				})
			},

			// 视频
			async initByvideo(isActive) {
				try {
					if (!isActive && this.layerGroups.video) {
						this.layerGroups.video.clearLayers()
						this.setTitle('', 'video', 'del')
						return
					}
					uni.showLoading({
						title: '正在加载'
					})
					this.loading = true
					const geoJSON = await controlApi.stationToLogtdLattd('WPMonitoringPoints')
					this.loading = false
					const features = geoJSON.data.features.filter((el) => {
						return el.properties.SOURCE == '水利监控'
					})
					// const geoJSON2 = await controlApi.stationToLogtdLattd('城管监控.json')
					// const features2 = geoJSON2.data.features
					this.$hideLoading()
					// this.siteLayer = L.featureGroup().addTo(this.layerGroups.alone)
					this.siteLayer = L.featureGroup.collision({ margin: 20 }).addTo(this.layerGroups.video)
					// const videoListResp=await controlApi.getJsonUrl('http.json?t='+new Date().getTime())
					// let videoList=videoListResp
					features.forEach((item) => {
						let sin = item.properties
						let lat = item.geometry.coordinates[1]
						let lon = item.geometry.coordinates[0]
						const marker = L.marker([lat, lon], {
							icon: L.divIcon({
								// iconAnchor: [0, 20],
								className: 'map-town-legend-style',
								// iconAnchor: [0, 30],
								iconSize: [25, 25],
								html: `
								<div class='map-town-legend rain-popup videoShowClass'  style='display:none'>
										<span> ${sin.NAME} </span>
										<div class='borderTop' style='background:#fff'></div>
								       </div>
									   <img src="/static/image/map/video-sl.png" style='width:25px' alt="" srcset=""/>
								`

								// `<img src="/static/image/map/video-sl.png" style='width:25px' alt="" srcset=""/>`
							})
						}).on('click', (e) => {
							let itemData = parseInt(e.target.data)
							if (this.videoList[itemData] && this.videoList[itemData][0]) {
								this.videoUrl = this.videoList[itemData][0]
								this.videoShow = true
							} else {
								uni.showToast({
									icon: 'none',
									title: '暂无监控，请查看其他设备'
								})
							}
						})

						if (sin.NAME.indexOf('安砂') > -1) {
							marker.addTo(this.layerGroups.video)
						} else {
							marker.addTo(this.siteLayer)
						}
						marker.data = sin.ORDER_INDEX
					})
					this.map.on('zoomend', (e) => {
						if (this.type != 'video') {
							// this.map.off('zoomend')
							return
						}
						if (this.map._zoom < 7.3) {
							let domList = document.querySelectorAll('.videoShowClass')
							domList = Array.from(domList)
							domList.forEach((el) => (el.style.display = 'none'))
						} else {
							setTimeout(() => {
								let domList = document.querySelectorAll('.videoShowClass')
								domList = Array.from(domList)
								domList.forEach((el) => (el.style.display = 'flex'))
							}, 500)
						}
					})
					// features2.forEach((item) => {
					// 	let sin = item.properties
					// 	let lat = item.geometry.coordinates[1]
					// 	let lon = item.geometry.coordinates[0]
					// 	const marker = L.marker([lat, lon], {
					// 		icon: L.divIcon({
					// 			// iconAnchor: [0, 20],
					// 			className: 'map-town-legend-style',
					// 			// iconAnchor: [0, 30],
					// 			iconSize: [25, 25],
					// 			html: `<img src="/static/image/map/video-cg.png" style='width:25px' alt="" srcset=""/>`
					// 		})
					// 	})
					// 		.on('click', (e) => {
					// 			console.info(`e:`, e)
					// 			let itemData = parseInt(e.target.data)
					// 			this.videoUrl = videoList[itemData][0]
					// 			this.videoShow = true
					// 		})
					// 		.addTo(this.siteLayer)
					// 	marker.data = item.id
					// })
				} catch (error) {
					console.error(error)
					this.loading = false
					this.$hideLoading()
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},

			clickDzdList(value) {
				let index = this.dzdList.findIndex((el) => el == value)
				if (index > -1) {
					this.dzdList.splice(index, 1)
				} else {
					this.dzdList.push(value)
				}
				this.$nextTick(() => {
					this.initBydzd(true)
				})
			},

			//地灾点
			async initBydzd(isActive) {
				if (!isActive && this.layerGroups.dzd) {
					this.layerGroups.dzd.clearLayers()
					this.setTitle('', 'dzd', 'del')
					return
				}
				let params = {
					service: 'WFS',
					request: 'GetFeature',
					version: '1.0.0',
					outputFormat: 'application/json',
					maxFeatures: '10000',
					typeName: 'sanming:地质灾害点'
				}
				try {
					uni.showLoading({
						title: '正在加载'
					})
					let res = []
					this.loading = true
					if (!this.DzSite) {
						this.DzSite = await controlApi.getDzSite(params)
						res = this.DzSite
					} else {
						res = this.DzSite
					}
					this.loading = false
					this.$hideLoading()
					this.layerGroups.dzd.clearLayers()
					var markers = L.markerClusterGroup().addTo(this.layerGroups.dzd)
					const dzTypeList = [
						{
							label: '崩塌',
							icon: 'dzd-bt',
							field: 'COLLAPSE',
							color: '#9e2bf7'
						},
						{
							label: '地面崩塌',
							icon: 'dzd-dmbt',
							field: 'GROUNDCOLLAPSE',
							color: '#fbbd30'
						},
						{
							label: '泥石流',
							icon: 'dzd-nsl',
							field: 'DEBRISFLOW',
							color: '#0dd48c'
						},
						{
							label: '滑坡',
							icon: 'dzd-hp',
							field: 'LANDSLIDE',
							color: '#3e81ee'
						},
						{
							label: '高陡边坡',
							icon: 'dzd-gdbp',
							field: 'HIGHSTEEPSLOPE',
							color: '#c83d35'
						}
					]
					res.features.forEach((item) => {
						let obj = dzTypeList.find((fItem) => fItem.field == item.properties.disasterTy)
						if (obj) {
							let icon = obj.icon
							// let field = obj.field
							if (!this.dzdList.includes(icon)) {
								return
							}
							let tip = `
						<div>
							<div style="display:flex;align-items:center;margin-bottom:5px">
											<img src="/static/image/map/${icon}.png" style='position:relative;bottom:2px;width:18px;margin-right:5px' alt="" srcset=""/>
											<div style="font-size:16px">地灾隐患点</div>
										</div>
										<div style="margin-bottom: 5px">类型：${obj.label}</div>
										<div style="margin-bottom: 5px">位置：${item.properties.geograPosi}</div>
										<div style="margin-bottom: 5px">名称：${item.properties.disasterNa}</div>
										</div>
						`
							markers.addLayer(
								L.marker([item.properties.latitude, item.properties.longitude], {
									icon: L.divIcon({
										className: 'map-town-legend-style',
										iconSize: [25, 25],
										html: `<img src="/static/image/map/${icon}.png" style='width:25px' alt="" srcset=""/>`
									})
								}).on('click', (e) => {
									this.dzdShow = true
									this.dzdHtml = tip
								})
								// .bindPopup(tip)
							)
						}
					})
					// this.markers = markers
				} catch (error) {
					console.error(error)
					this.$hideLoading()
					this.loading = false
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},

			// 台风
			async initBytyphoon(isActive) {
				try {
					if (!isActive && this.layerGroups.typhoon) {
						this.layerGroups.typhoon.clearLayers()
						this.setTitle('', 'typhoon', 'del')
						this.isNoTF = false
						return
					}
					this.loading = true
					const resp = await controlApi.getLastTyData()
					this.loading = false
					if (resp.success) {
						const { data } = resp
						if (data && data.length > 0) {
							this.isNoTF = false
							data.forEach((el) => {
								L.typhoonGroup()
									.setData(el, {
										isWindCircle: true,
										pointRadius: 3.5,
										tyNameClass: 'tyNameClass'
										// tyNameClass: 'tyNameClass'
									})
									.addTo(this.layerGroups.typhoon)
							})
							this.flyto(data[0])
						} else {
							this.isNoTF = true
						}
					} else {
						this.$hideLoading()
						uni.showToast({
							icon: 'error',
							title: '获取失败'
						})
					}
					// if (resp.data && resp.data.typhoonNo) {
					// 	L.typhoonGroup()
					// 		.setData(resp.data, {
					// 			isWindCircle: true,
					// 			pointRadius: 3.5
					// 		})
					// 		.addTo(this.layerGroups.typhoon)
					// 	this.fitBounds(this.layerGroups.typhoon)
					// 	this.map.panBy([0.01, 0.01])
					// 	this.isNoTF = false
					// } else {
					// 	this.isNoTF = true
					// }
				} catch (error) {
					console.error(error)
					this.loading = false
				}
			},
			flyto(resp) {
				let typhoonData = resp.typhoonData
				let lastItem = typhoonData.slice(-1)
				lastItem = lastItem[0]
				this.map.flyTo([lastItem.latitude, lastItem.longitude], 4, {
					animate: false
				})
				this.map.panBy([0.01, 0.01])
			},
			// 将地图的视图设置在合适范围内
			fitBounds(layerGroup, fitBoundsOptions) {
				if (!fitBoundsOptions) {
					fitBoundsOptions = {
						paddingTopLeft: [100, 100],
						paddingBottomRight: [100, 100]
					}
				}
				if (layerGroup && layerGroup.getBounds()._northEast) {
					this.map.fitBounds(layerGroup.getBounds(), fitBoundsOptions)
				}
			},

			setTitle(data, key, type = 'add') {
				const index = this.titles.findIndex((item) => {
					return item.key == key
				})
				if (type == 'add') {
					if (index > -1) {
						this.titles[index].title = data
					} else {
						this.titles.push({ title: data, key: key })
					}
				}
				if (type == 'del') {
					if (index > -1) {
						this.titles.splice(index, 1)
					}
				}
				this.$refs.mapView.setTitle(this.titles)
			},

			// 图层管理
			changeBase(target) {
				if (target.value) {
				}
			},
			playVedio() {
				// uni.createVideoContext('video', this).requestFullScreen()
				// plus.screen.lockOrientation('landscape-primary')
			},
			screenchange(event) {
				const video = document.getElementById('video')
				if (!event.detail.fullScreen) {
					video.style.transform = ' rotate(0deg)'
				} else {
					video.style.transform = ' rotate(90deg)' // 进入全屏
				}
				// if (event.detail.fullScreen) {
				// 	plus.screen.lockOrientation('landscape-primary')
				// } else {
				// 	plus.screen.lockOrientation('portrait')
				// }
			},
			rainAccount() {
				uni.navigateTo({
					url: '/pages-subPackages/monitor/rainAccount?type=' + this.moreEle,
					fail: (err) => {}
				})
			},
			// 添加水系
			addWaterXi() {
				this.isChoseWaterXi = !this.isChoseWaterXi
				this.$refs.mapView.initWaterXi(this.isChoseWaterXi)
			},
			seeTotalRain(type) {
				switch (type) {
					case 'rain':
						uni.navigateTo({ url: `/pages-subPackages/monitor/rainOverview?accHour=` + this.accHour })
						break
					case 'water':
						uni.navigateTo({ url: `/pages-subPackages/monitor/waterList?accHour=` + this.accHour })
						break
					case 'work':
						uni.navigateTo({ url: `/pages-subPackages/monitor/workList?accHour=` + this.accHour })
						break
					case 'video':
						uni.navigateTo({ url: `/pages-subPackages/monitor/videoList` })
						break
				}
				// let obj = {
				// 	title: '雨情总览',
				// 	type: 'url'
				// }
			},
			// 定位
			async changePos() {
				this.isPos = !this.isPos
				if (!this.isPos) {
					this.$refs.mapView.getMarkerData(this.isPos, '', '')
				} else {
					let latlon = await this.$getLocation()
					this.$refs.mapView.getMarkerData(this.isPos, latlon.latitude, latlon.longitude)
				}
			}
		}
	}
</script>

<style lang="less">
	.app-box {
		position: relative;
		width: 100%;
	}

	.monitor-control {
		.left-list {
			position: absolute;
			z-index: 999;
			top: 15rpx;
			left: 10rpx;
			.icon-type {
				width: 150rpx;
				height: 60rpx;
			}
		}
		.right-list {
			position: absolute;
			z-index: 999;
			top: 15rpx;
			right: 10rpx;
			background: #fff;
			padding: 10rpx 10rpx;
			box-shadow: 0px 4rpx 30rpx rgba(0, 0, 0, 0.28);
			border-radius: 10rpx;
			width: 160rpx;
			.icon-type {
				width: 150rpx;
				height: 60rpx;
			}
		}

		.botBox-list {
			position: absolute;
			z-index: 700;
			width: 720rpx;
			bottom: 0rpx;
			left: 15rpx;
			.slider-box {
				display: flex;
				align-items: center;
				height: 87rpx;
				padding: 0 20rpx;
				width: 100%;
				background: #fff;
				margin-bottom: 10rpx;
				border-radius: 10rpx;
				box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.36);
			}
			.legend-list {
				width: 100%;
				.legend-box {
					display: flex;
					min-height: 80rpx;
					height: fit-content;
					border-radius: 10rpx;
					box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.36);
					width: 100%;
					background: #fefffe;
					padding: 0 7rpx;
					padding-bottom: 13rpx;
					margin-bottom: 12rpx;
					/deep/.simple-legend {
						padding: 0 4rpx;
						width: 100%;
					}
				}
			}
		}

		.bot-type-list {
			position: absolute;
			z-index: 700;
			bottom: 220rpx;
			right: 10rpx;
		}
	}
	/deep/.map-town-legend-style {
		// position: relative;
		.map-town-legend {
			position: absolute;
			display: flex;
			align-items: center;
			white-space: nowrap;
			left: 50%;
			transform: translateX(-50%);
			top: -35px;
			// min-width: 181rpx;
			height: 49rpx;
			background: #fefffe;
			box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.36);
			padding: 0 10rpx;
			border: 1rpx solid rgba(0, 0, 0, 0.45);
			border-radius: 10rpx;
			.borderTop {
				position: absolute;
				left: 50%;
				transform: rotate(45deg);
				bottom: -7rpx;
				width: 16rpx;
				height: 16rpx;
				// border-left: 14rpx solid transparent;
				// border-right: 14rpx solid transparent;
				border-top: 14rpx solid #ffffff;
				display: block;
				transform-origin: left top;
				box-sizing: border-box;
				border: 1rpx solid rgba(0, 0, 0, 0.45);
				border-color: transparent rgba(0, 0, 0, 0.36) rgba(0, 0, 0, 0.36) transparent;
			}

			.siteName {
				min-width: 50rpx;
				text-align: center;
			}

			.value {
				min-width: 77rpx;
				text-align: center;
				border-radius: 5rpx;
				margin-left: 3rpx;
			}
		}
		.circle-legend {
			width: 17rpx;
			height: 17rpx;
			background: #fff;
			border: 2rpx solid #ffffff;
			border-radius: 50%;
			box-shadow: 0rpx 4rpx 4rpx rgba(0, 0, 0, 0.25);
			transform: translateX(0rpx);
		}
	}

	.diy-type {
		.diy-flex-bt {
			flex-direction: row !important;
			justify-content: space-between;
			padding: 0 15rpx;
		}
	}
	.water-legend {
		height: 122.5rpx;
		background: #fff;
		padding: 20rpx;
		margin-bottom: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12rpx;
		box-shadow: 0px 4rpx 30rpx rgba(0, 0, 0, 0.28);
		.ml10 {
			font-size: 24rpx;
		}
		.flex-cc {
			margin: 0 12rpx;
		}
	}
	.noTf {
		position: absolute;
		z-index: 700;
		bottom: 200rpx;
		left: 50%;
		transform: translateX(-50%);
		// background: #ffffff;
		padding: 10rpx 50rpx;
		border-radius: 10rpx;
		width: 398rpx;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.43);
		color: #fff;
		box-shadow: 0px 4rpx 30rpx rgba(0, 0, 0, 0.28);
		backdrop-filter: blur(15rpx);
	}
	.bottom-map-base {
		padding: 20rpx 0 0 20rpx;
	}
	.slot-content-modal {
		width: 750rpx;
		background: #000;
	}

	.dzd-content-modal {
		width: 100%;
		padding: 20rpx;
		background: #fff;
	}

	.type-select-row {
		background: #fefffe;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(19, 83, 156, 0.24);
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		overflow: hidden;
		font-size: 26rpx;
		height: fit-content;
		// width: 90rpx;
		color: #007aff;
		padding: 10rpx;
	}
	.icon-type-row {
		width: 100%;
		background: #fefffe;
		// box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(19, 83, 156, 0.24);
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		text-align: center;
		overflow: hidden;
		padding: 10rpx 10rpx;
		font-size: 26rpx;
		margin: 3rpx 0;
		// width: 90rpx;
		color: #607589;
	}
	.icon-type-row .text {
		color: #000;
	}
	.icon-type-row-ac {
		color: #fff;
		background: #007aff !important;
	}
	.icon-type-row-ac .text {
		color: #fff;
	}
	.icon-type-row-box .icon-type-row {
		background: none;
		box-shadow: none;
		border-radius: 0;
	}
	.icon-type-row-box .line {
		border-top: 2rpx solid rgba(0, 0, 0, 0.13);
		width: 60%;
		margin: 3rpx auto;
	}

	.noChose {
		filter: gray;
		filter: grayscale(100%);
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
	}
</style>
